<!-- 设备管理 -->
<script setup>
import { ref, inject, reactive } from 'vue'
import { RefreshRight, Open, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { size } from 'lodash';

//引入axios
const axios = inject('axios')
//页面所需使用的数据
let myData = reactive({
  "equipment": [],
  "pageParams": { "page": 1, "rows": 4, "total": 1 }
})

//查询表单所需的数据
function selectData() {
  axios({
    method: 'post',
    url: '/api/equipment/getEquipment',
    // data: myData.pageParams
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.equipment != null) {
        myData.equipment = response.data.map.equipment
        console.log(response.data.map)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无设备信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误", '结果')
  })
}
selectData()
//表单序号自增
const indexMethod = (index) => {
  return index + 1
}

//临时测试数据
// const tableData = [
//   {
//     "id": 1,
//     "name": '设备5(称重)',
//   }
// ]

//
const input = ref('')
</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;">
    <el-col :span="24">
      <!-- 表单功能栏 -->
      <el-row class="row1">
        <!-- 表格名称 -->
        <el-col :span="3" class="col1"><span>设备列表</span></el-col>
        <!-- 添加新设备按钮 -->
        <el-col :span="3" :offset="18">
          <el-button class="addPerson-btn" size="small" type="success" @click="handleExcelExport('用户列表.xlsx')">
            添加新设备
          </el-button>
        </el-col>
      </el-row>
      <el-row class="row2">
        <el-col :span="3">
          <el-button :icon="RefreshRight" size="middle" style="margin:0px 0px 0px 20px">
            刷新
          </el-button>
        </el-col>
        <el-col :span="21" class="col2">
          <el-row>
            <el-col :span="22">
              <el-input style="margin:0px 0px 0px -6px ;" v-model="input" class="input" placeholder="请输入设备名称..."
                clearable />
            </el-col>
            <el-col :span="2">
              <el-button type="success" style="margin:0px 0px 0px -6px ;">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 96%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="myData.equipment" stripe border style="width:100%">
            <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="160px" />
            <el-table-column label="名称" align="center" prop="equipmentType" width="400px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button type="primary" @click="" :icon="Edit" size="small">编辑</el-button>
                <el-button type="danger" @click="" :icon="Delete" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
       <!-- 分页组件：Pagination组件 -->
       <el-row justify="center" align="middle" style="height: 60px;">
        <el-col :span="16">
          <el-pagination v-model:currentPage="myData.pageParams.page" v-model:page-size="myData.pageParams.rows"
            :page-sizes="[2, 4, 10, 20]" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="myData.pageParams.total" @size-change="" @current-change="" :page-count="7" />
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style scoped>
.row1 {
  border-bottom: 1px solid #f7f7f7;
  padding-top: 15px;
  height: 51px;
}

.row2 {
  padding-top: 40px;
}

.row2 .col2 .input {
  border-radius: 0px;
}

.row3 {
  padding-top: 10px;
}

.rwo1 .col1 span {
  font-size: medium;
  font-weight: 900;
  padding-left: 5px;
}

.excel-btn {
  margin-left: 60px;
}

.addPerson-btn {
  margin: 0px 0px 0px 25px;
}
</style>